<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .color{
            color: red;
        } */
    </style>
    <link rel="stylesheet" href="./cpn.css">
</head>
<body>
    <!-- 组件可以访问实例里面的数据吗？ -->
    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="myCpn">
        <!-- 最外层的div 相当于我们html中的body -->
        <div>
            我是一个组件
            <div class="color">
                {{ msg }}
            </div>
            <div>
                {{ name }}
            </div>
            <div>{{ fllCounts }}</div>
            <button @click="add">+1</button>
        </div>
    </template>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    msg:'我是实例里面的某个内容'
                }
            },
            components:{
                'my-cpn':{
                    template:'#myCpn',
                    data(){
                        return {
                            msg:'我是组件中的data数据',
                            name:'王发发',
                            count:1,
                            counts:2
                        }
                    },
                    methods:{
                        add(){
                            this.count++
                        }
                    },
                    computed:{
                        fllCounts(){
                            return this.count + this.counts 
                        }
                    }
                }
            }
        })
    </script>
    <script>
        // 每一个组件都类似于一个闭包，他们都拥有自己独立的作用域，都有自己独立的数据存储的地方
        // 组件还有两个特性，第一 独立 第二 可复用
        // function add(){
        //     let a = 1
        //     function del(){
        //         console.log(a) // 1
        //     }
        //     console.log(a) // 1
        // }
        // function getData(){
        //     console.log(a) //undefined
        // }
    </script>
</body>
</html>